<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Test Page</title>
    <script>
        async function submitForm(event) {
            event.preventDefault(); // 防止表单默认提交

            const formData = new FormData();
            const prompt = document.getElementById("prompt").value;
            const image = document.getElementById("image").files[0];
            const audio = document.getElementById("audio").files[0];

            if (prompt) {
                formData.append("prompt", prompt);
            }
            if (image) {
                formData.append("image", image);
            }
            if (audio) {
                formData.append("audio", audio);
            }

            try {
                const response = await fetch("/multimodal/chat", {
                    method: "POST",
                    body: formData
                });

                if (response.ok) {
                    const result = await response.text();
                    document.getElementById("response").innerText = result;
                } else {
                    document.getElementById("response").innerText = "Error: " + response.status;
                }
            } catch (error) {
                console.error("Error:", error);
                document.getElementById("response").innerText = "Error: " + error.message;
            }
        }
    </script>
</head>
<body>
<h1>API Test Page</h1>
<form id="testForm" onsubmit="submitForm(event)" enctype="multipart/form-data">
    <div>
        <label for="prompt">Prompt:</label>
        <input type="text" id="prompt" name="prompt" placeholder="Enter your prompt here">
    </div>
    <div>
        <label for="image">Image:</label>
        <input type="file" id="image" name="image" accept="image/png, image/jpeg">
    </div>
    <div>
        <label for="audio">Audio:</label>
        <input type="file" id="audio" name="audio" accept="audio/*">
    </div>
    <button type="submit">Generate</button>
</form>
<h2>Response:</h2>
<pre id="response"></pre>
</body>
</html>
